<!--
    /**
     * @author RaoShuang
     * @emil 991207823@qq.com
     * @date 2020/11/23 21:25
     */
-->
<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>v-on:事件修饰符</title>
        <style>
            #div {
                background-color: red;
                width:300px;
                height:300px;
            }
        </style>
		<script src="js/vuejs-2.5.16.js"></script>
	</head>

	<body>
		<div id="app">
            <!-- 传统方式 -->
            <form action="http://www.baidu.com" method="post" onsubmit="return checkForm()">
                传统方式:<input type="submit" value="提交">
            </form>
            <hr/>

            <form @submit.prevent action="http://www.baidu.com" method="post" >
                Vue:<input type="submit" value="提交">
            </form>
            <hr/>

            <div @mouseover="fun1" id="div">
                <textarea @mouseover.stop="fun2($event)">这是一个文件域</textarea>
            </div>
		</div>
	</body>
	<script>
        //传统js方式
        function checkForm(){
            alert("访问：http://www.baidu.com");
            //表单验证必须有一个明确的boolean类型返回值
            //在应用验证方法时必须加上 return  方法名称
            return false;
        }

		//view model
        new Vue({
            el:"#app",
            methods:{
                fun1:function(){
                    alert("鼠标悬停在div上了");
                },
                fun2:function(event){
                    alert("鼠标悬停在textarea上了");
                }
            }
        });
	</script>

</html>